<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>基本信息</h2>
      </div>
      <el-form
        label-position="right"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="工资单名称" prop="name">
          <el-input v-model="ruleForm.name" style="width:'100px"></el-input>
        </el-form-item>
        <el-form-item label="关联薪资方案" prop="method">
          <el-select
            v-model="ruleForm.method"
            placeholder="请选择活动区域"
            @change="methodChange"
          >
            <el-option
              v-for="(i, index) in sort"
              :key="index"
              :label="i.name"
              :value="i._id"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>薪资项显示设置</h2>
      </div>
      <!-- <el-button type="primary" size="small">添加分组</el-button> -->
      <div class="basic">
        <p class="basic1">
          <span class="span1"></span>
          <span>基本工资</span>
        </p>
        <el-tag
          :key="tag"
          v-for="tag in basicTags"
          closable
          :disable-transitions="false"
          @close="handleClosebasic(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisiblebasic"
          v-model="inputValuebasic"
          ref="saveTagInputbasic"
          size="small"
          @keyup.enter.native="handleInputConfirmbasic"
          @blur="handleInputConfirmbasic"
        >
        </el-input>
        <el-button
          type="primary"
          v-else
          class="button-new-tag"
          size="small"
          @click="showInputbasic"
          >+ 添加</el-button
        >
      </div>
      <div class="basic">
        <p class="basic1">
          <span class="span1"></span>
          <span>奖金</span>
        </p>
        <el-tag
          :key="tag"
          v-for="tag in moneyTags"
          closable
          :disable-transitions="false"
          @close="handleClosemoney(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisiblemoney"
          v-model="inputValuemoney"
          ref="saveTagInputmoney"
          size="small"
          @keyup.enter.native="handleInputConfirmmoney"
          @blur="handleInputConfirmmoney"
        >
        </el-input>
        <el-button
          type="primary"
          v-else
          class="button-new-tag"
          size="small"
          @click="showInputmoney"
          >+ 添加</el-button
        >
      </div>
      <div class="basic">
        <p class="basic1">
          <span class="span1"></span>
          <span>补贴</span>
        </p>
        <el-tag
          :key="tag"
          v-for="tag in btTags"
          closable
          :disable-transitions="false"
          @close="handleClosebt(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisiblebt"
          v-model="inputValuebt"
          ref="saveTagInputbt"
          size="small"
          @keyup.enter.native="handleInputConfirmbt"
          @blur="handleInputConfirmbt"
        >
        </el-input>
        <el-button
          type="primary"
          v-else
          class="button-new-tag"
          size="small"
          @click="showInputbt"
          >+ 添加</el-button
        >
      </div>
      <div class="basic">
        <p class="basic1">
          <span class="span1"></span>
          <span>扣除</span>
        </p>
        <el-tag
          :key="tag"
          v-for="tag in kTags"
          closable
          :disable-transitions="false"
          @close="handleClosek(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisiblek"
          v-model="inputValuek"
          ref="saveTagInputk"
          size="small"
          @keyup.enter.native="handleInputConfirmk"
          @blur="handleInputConfirmk"
        >
        </el-input>
        <el-button
          type="primary"
          v-else
          class="button-new-tag"
          size="small"
          @click="showInputk"
          >+ 添加</el-button
        >
      </div>
      <div class="basic">
        <p class="basic1">
          <span class="span1"></span>
          <span>其他</span>
        </p>
        <el-tag
          :key="tag"
          v-for="tag in qtTags"
          closable
          :disable-transitions="false"
          @close="handleCloseqt(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisibleqt"
          v-model="inputValueqt"
          ref="saveTagInputqt"
          size="small"
          @keyup.enter.native="handleInputConfirmqt"
          @blur="handleInputConfirmqt"
        >
        </el-input>
        <el-button
          type="primary"
          v-else
          class="button-new-tag"
          size="small"
          @click="showInputqt"
          >+ 添加</el-button
        >
      </div>
    </el-card>
<!-- 
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>员工端设置</h2>
      </div>
      <el-form
        label-position="right"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="薪资项为0:">
          <el-radio-group >
            <el-radio label="显示" v-model="ruleForm.zero"></el-radio>
            <el-radio label="不显示" v-model="ruleForm.zero"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="薪资项为空:">
          <el-radio-group v-model="ruleForm.null">
            <el-radio label="显示"></el-radio>
            <el-radio label="不显示"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="员工确认薪资">
          <el-switch v-model="ruleForm.xz" @change="xzChange"></el-switch>
          <span v-if="ruleForm.xz" class="span_input">
            超过<el-input class="inp" placeholder="请输入"></el-input
            >系统将自动确认
          </span>
        </el-form-item>
      </el-form>
    </el-card> -->
    <div>
      <el-button @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "APIAddpay",

  data() {
    return {
      sort: [],
      basicTags: [],
      moneyTags: [],
      btTags: [],
      kTags: [],
      qtTags: [],
      inputVisiblebasic: false,
      inputVisiblemoney: false,
      inputVisiblebt: false,
      inputVisiblek: false,
      inputVisibleqt: false,
      inputValuebasic: "",
      inputValuemoney: "",
      inputValuebt: "",
      inputValuek: "",
      inputValueqt: "",
      ruleForm: {
        name: "",
        method: "",
        showSet: {},
        zero: false,
        null: false,
        xz: false,
      },
      rules: {
        name: [
          { required: true, message: "请输入工资单名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        method: [
          { required: true, message: "请选择关联薪资方案", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.getSort();
  },

  methods: {
    methodChange(e) {
      this.ruleForm.method = e;
      console.log(e);
    },
    async getSort() {
      let { data } = await axios.get("/xz/getSort");
      this.sort = data;
    },
    xzChange(e) {
      this.sz = e;
    },
    handleClosebasic(tag) {
      this.basicTags.splice(this.basicTags.indexOf(tag), 1);
    },
    handleClosemoney(tag) {
      this.moneyTags.splice(this.moneyTags.indexOf(tag), 1);
    },
    handleClosebt(tag) {
      this.btTags.splice(this.btTags.indexOf(tag), 1);
    },
    handleClosek(tag) {
      this.kTags.splice(this.kTags.indexOf(tag), 1);
    },
    handleCloseqt(tag) {
      this.qtTags.splice(this.qtTags.indexOf(tag), 1);
    },
    showInputbasic() {
      this.inputVisiblebasic = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInputbasic.$refs.input.focus();
      });
    },
    showInputmoney() {
      this.inputVisiblemoney = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInputmoney.$refs.input.focus();
      });
    },
    showInputbt() {
      this.inputVisiblebt = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInputbt.$refs.input.focus();
      });
    },
    showInputk() {
      this.inputVisiblek = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInputk.$refs.input.focus();
      });
    },
    showInputqt() {
      this.inputVisibleqt = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInputqt.$refs.input.focus();
      });
    },

    handleInputConfirmbasic() {
      let inputValue = this.inputValuebasic;
      if (inputValue) {
        this.basicTags.push(inputValue);
      }
      this.inputVisiblebasic = false;
      this.inputValuebasic = "";
    },
    handleInputConfirmmoney() {
      let inputValue = this.inputValuemoney;
      if (inputValue) {
        this.moneyTags.push(inputValue);
      }
      this.inputVisiblemoney = false;
      this.inputValuemoney = "";
    },
    handleInputConfirmbt() {
      let inputValue = this.inputValuebt;
      if (inputValue) {
        this.btTags.push(inputValue);
      }
      this.inputVisiblebt = false;
      this.inputValuebt = "";
    },
    handleInputConfirmk() {
      let inputValue = this.inputValuek;
      if (inputValue) {
        this.kTags.push(inputValue);
      }
      this.inputVisiblek = false;
      this.inputValuek = "";
    },
    handleInputConfirmqt() {
      let inputValue = this.inputValueqt;
      if (inputValue) {
        this.qtTags.push(inputValue);
      }
      this.inputVisibleqt = false;
      this.inputValueqt = "";
    },
    async save() {
      this.ruleForm.showSet["基本工资"] = this.basicTags;
      this.ruleForm.showSet["奖金"] = this.moneyTags;
      this.ruleForm.showSet["扣除"] = this.kTags;
      console.log(this.ruleForm);
      let {
        data: { code, msg },
      } = await axios.post("/xz/addMb", this.ruleForm);
      if (code == 200) {
        this.$message.success(msg);
        this.$router.push("/home/pay");
      }
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.basic {
  border: 1px solid #e1e6eb;
  padding: 20px;
}
.basic > .basic1 span:first-child {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #3399ff;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: 2px;
}
.basic > .basic1 span:nth-child(2) {
  font-size: 20px;
  font-weight: bolder;
  color: #657180;
}
.el-tag {
  margin: 22px 0 0 15px;
}
.inp {
  width: 80px;
  margin: 0 10px;
}
.span_input {
  margin-left: 100px;
}
</style>